<template>
  <div class="app-container">
    <div class="pb-20">服务支持配置</div>
    <div
      v-for="item in typeList"
      :key="item.type"
      class="mb-20 pl-15"
    >
      <div class="disFlx pb-15">
        <div class="mr-30">
          {{ item.label }}
        </div>
        <el-switch
          v-model="item.status"
          @change="(val) => handStatus(val, item)"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </div>

      <div class="disFlx fz-14" style="flex-wrap: wrap">
        <div
          class="disFlxAC pa-15 br-5 service"
          v-for="user in serviceList[item.typeKey]"
          :key="user.id"
        >
          <image-preview
            :src="item.typeKey === 'videoSupportList' ? user.headimg : user.userAvatar"
            :width="50"
            :height="50"
          />
          <div class="pl-10">
            <div>
              <span>{{ user.userName }}</span>
              <span v-if="item.typeKey === 'videoSupportList'" class="fz-12 pl-10 color9">{{
                user.postName
              }}</span>
            </div>
            <div class="pt-5 color9 ov-1" style="max-width: 200px">
              {{ item.typeKey === 'videoSupportList' ? user.com : user.userPhone }}
            </div>
          </div>
          <i class="iconfont el-icon-close cup" @click="handDelete(item.type, user.id)" />
        </div>
        <div
          class="disFlxCC pa-15 br-5 service cup colorZS"
          @click="openAdd(item.type)"
        >
          <div class="fz-20">
            <i class="iconfont el-icon-circle-plus-outline" />
          </div>
          <div>{{ item.typeKey === 'videoSupportList' ? "选择人员" : "添加电话" }}</div>
        </div>
      </div>
    </div>

    <PhoneSupport ref="PhoneSupport" @refresh="getList" />
    <ConfigExpert ref="ConfigExpert" @refresh="getList" />
  </div>
</template>

<script>
import PhoneSupport from "./components/phoneSupport";
import ConfigExpert from "./components/configExpert";
import {
  getCustomerService,
  deleteCustomerService,
  setCustomerService
} from "@/api/saas/customerService";

export default {
  name: "CustomerService",
  components: {
    PhoneSupport,
    ConfigExpert,
  },
  data() {
    return {
      typeList: [],
      serviceList: {
        videoSupportList: [],
        phoneSupportList: [],
      },
      service: false,
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data } = await getCustomerService();
      this.serviceList.videoSupportList = data.videoSupportList;
      this.serviceList.phoneSupportList = data.phoneSupportList;

      this.typeList = [
        {
          label: "在线视频支持",
          type: "0",
          typeKey: 'videoSupportList',
          status: data.videoSwitch === '1'
        },
        {
          label: "电话支持",
          type: "1",
          typeKey: 'phoneSupportList',
          status: data.phoneSwitch === '1'
        },
      ];
    },
    openAdd(type) {
      if (type === "0") {
        this.$refs.ConfigExpert.show();
      } else {
        this.$refs.PhoneSupport.show();
      }
    },
    handStatus(status, item) {
      let params = item.type === '0' ? {
        videoSwitch: status ? 1 : 0
      } : {
        phoneSwitch: status ? 1 : 0
      }
      setCustomerService(params).then(()=>{
        this.$message.success(status ? '开启成功' : '关闭成功')
      }).catch((err)=>{
        item.status = !item.status; // 还原
      })
    },
    // 删除
    handDelete(supportType, id) {
      const that = this;
      this.$confirm("此操作将删除此数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            deleteCustomerService({ supportType, id }).then(() => {
              that.getList();
              done(true);
            });
          } else {
            done(true);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.service {
  background-color: #f5f5f5;
  height: 80px;
  min-width: 175px;
  margin: 5px;
  position: relative;
  .el-icon-close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
    z-index: 1;
  }
}
</style>
